<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<style>
		* {
			/* margin: 0; */
			padding: 0;
			list-style: none;
			font-size: 14px;
			font-style: normal;
		}

		#app {
			display: flex;
			justify-content: space-between;
			width: 1000px;
			margin: 10px auto;
			border: 1px solid #000;
			border-radius: 5px;
		}

		#app .area {
			width: 50%;
		}

		#app .area:first-child {
			border-right: 1px dashed #000;
		}

		#app .area h2 {
			text-align: center;
			margin-top: 20px;
			margin-bottom: 40px;
			font-size: 20px;
		}

		#app .area .a {
			padding-left: 20px;
			padding-right: 20px;
			padding-bottom: 20px;
		}

		#app .area .a .c {
			margin-bottom: 20px;
		}

		#app .area .a .c h3 {
			margin-bottom: 20px;
		}

		#app .area .a .c input[type='text'],
		#app .area .a .c textarea {
			width: 441px;
			height: 86px;
			padding-left: 8px;
			border-radius: 5px;
			border: 1px solid #888;
			font-size: 12px;
			outline: none;
		}

		.der h2 {
			margin-right: 199px;
			/* margin-left: 50px; */
			margin-top: 100px;
		}
	</style>
	<body>
		<div id="app">
			<div class="area">
				<h2>提问区</h2>
				<div class="a">
					<h3>1.请问你的姓名是？</h3>
					<input type="text" class="c" v-model="answer" />
					<h3>2.请问您的性别是？</h3>
					<input type="radio" class="c" v-model="picked" value="男" id="read" />
					<label for="study">男</label><br>
					<input type="radio" class="c" v-model="picked" value="女" id="study" />
					<label for="study">女</label><br>
					<input type="radio" class="c" v-model="picked" value="保密" id="play">
					<label for="study">保密</label><br>
					<h3>3. 请选择您的兴趣爱好：</h3>
					<label><input type="checkbox" class="c" v-model="more" value="看书" />看书</label><br />
					<label><input type="checkbox" class="c" v-model="more" value="游泳" />游泳</label><br />
					<label><input type="checkbox" class="c" v-model="more" value="跑步" />跑步</label><br />
					<label><input type="checkbox" class="c" v-model="more" value="看电影" />看电影</label>
					<h3>4. 请介绍一下自己:</h3>
					<textarea class="c" v-model="uy"></textarea>
					<div v-show="d1">
						<h3>5.{{hhh}}</h3>
						<div v-for="item in datalist">
							<input type="radio" :value="item" name="2" v-model="danxuan" @click="stcdenClick(item)">{{item}}
						</div>
					</div>
					<div v-show="d2">
						<h3>6.{{hhh2}}</h3>
						<textarea name="" cols="30" rows="10" v-model="wenben"></textarea>
					</div>
				</div>
			</div>
			<div class="area" style="margin-left: 20px;">
				<h2>回答展示区</h2>
				<h3>1.请问你的姓名是？</h3>
				{{answer}}
				<h3>2.请问您的性别是？</h3>
				{{picked}}
				<h3>3. 请选择您的兴趣爱好：</h3>
				{{more.join(',')}}
				<h3>4. 请介绍一下自己:</h3>
				{{uy}}
				<div v-show="d1">
					<h3>5.{{hhh}}</h3>
					{{danxuan}}
				</div>
				<div v-show="d2">
					<h3>6.{{hhh2}}</h3>
					{{wenben}}
				</div>

				<div class="der">
					<h2>添加问题</h2>
					<h4>问题描述：</h4>
					<input type="text" v-model="miaoshu" />
					<h4>问题类型：</h4>
					<select style="width: 170px;height: 23px;" v-model="wen">
						<option value="1" label="文本"></option>
						<option value="2" label="文本框"></option>
						<option value="3" label="单选"></option>
						<option value="4" label="多选"></option>
					</select>
				</div><br />
				<div v-show="wen==3">
					<h4>答案类型：</h4>
					<div>
						<ol>
							<li v-for="(item,index) in datalist">
								{{item}}
								<button @click="shanchu" class="shan">删除</button>
							</li>
						</ol>
						<input type="text" placeholder="请输入内容" v-model="mytest" />
						<button @click="tianjia">添加</button>
					</div>
				</div>
				<input type="submit" value="提交" / style="margin-left: 360px;" @click="tijiao1()">

			</div>
			<script>
				var vm = new Vue({
					el: '#app',
					data: {
						answer: '',
						aa: false,
						picked: '',
						more: [],
						uy: '',
						miaoshu: '',
						wen: '',
						datalist: [],
						mytest: '',
						danxuan: [],
						hhh: '',
						wenben: '',
						d1: false,
						d2: false,
						hhh2: '',
					},
					methods: {
						tianjia() {
							console.log('添加了一次选项')
							this.datalist.push(this.mytest)
							this.mytest = ""
						},
						shanchu(index) {
							this.danxuan.splice(index, 1)
						},
						tijiao1() {
							if (this.miaoshu != '' && this.wen == 3) {
								this.d1 = true
								this.hhh = this.miaoshu
								this.miaoshu = ''
								this.Shhh = ''
								this.wen = ''
							} else if (this.miaoshu != '' && this.wen == 2) {
								this.d2 = true
								this.hhh2 = this.miaoshu
								this.miaoshu = ''
								this.wen = ''
							}
						},
						stcdenClick(item){
							// this.danxuan = item
							this.danxuan = item
							// console.log(this.danxuan)
						}
					},
				})
			</script>
	</body>
</html>